import { useRef, useEffect, useState, createRef } from 'react'
// 模块化引入样式 - 避免class重名全局污染
import styles from './test.module.scss'
import { Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
// 引入子组件
import ChildTest from '@/components/ChildTest'
// 引入类子组件
import ClassCom from '@/components/ClassCom'
// 引入Context
import { TestContext } from '@/components/ContextComponents/TestContext'

interface MyComponentProps {
    name: string;
    changeName: Function
}

interface forwordType {
    inputVal: string,
    refInput: React.RefObject<HTMLInputElement>,
    someMethod: () => void
}

function TestView(props: MyComponentProps) {

    useEffect(() => {
        console.log(refInput)
        // 让这个input输入框自动聚焦
        if (refInput.current) {
            refInput.current.focus()
        }
    }, [])

    const changTestName = () => {
        props.changeName('New Name')
    }

    // 创建子组件的ref
    const childRef = createRef<ClassCom>()

    // 创建函数组件的子组件ref
    const childFunRef = useRef<forwordType>()

    // 使用useRef获取DOM元素
    const refInput = useRef<HTMLInputElement>(null)

    // 存储可变数据 - 不能用于渲染
    const clickCount = useRef(0)
    const clickCountAdd = () => {
        clickCount.current += 1
        console.log('clickCount =', clickCount.current)
    }

    const getInputValue = () => {
        console.log('currentInput =', refInput)
    }

    const [inputVal, setInputVal] = useState('')
    const handleChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInputVal(e.target.value)
    }

    // 点击获取子组件的ref
    const getChildRef = () => {
        console.log(childRef)
        childRef?.current?.myMethods()
    }

    // 点击获取函数子组件的ref
    const getFunChildRef = () => {
        console.log(childFunRef)
        console.log(childFunRef?.current?.inputVal)
        childFunRef?.current?.someMethod()
    }

    // 定义context传递的数据
    const [contextData, setContextData] = useState('这是Context数据')

    const updateConetextData = () => {
        setContextData('newContextData' )
    }

    return (
        <>
            <div className={styles.test_box}>这是测试组件
                <p className={styles.test_child}>这是子节点</p>
                <Button type="primary" className={styles.btn}>Button</Button>
                <Button type="primary" shape="circle" style={{ marginLeft: '10px', marginTop: '10px' }} icon={<SearchOutlined />}>
                </Button>
                <br />
                <p>{props.name}</p>
                <Button type='primary' onClick={changTestName}>changeTestName</Button>
                <br />
                <input style={{ marginTop: '10px' }} type="text" ref={refInput} value={inputVal} onChange={handleChangeInput} />
                <button onClick={getInputValue}>获取input的值</button>
                <div>
                    <button onClick={clickCountAdd}>点击</button>
                </div>
                <hr />
                <TestContext.Provider value={{ contextData, updateConetextData }}>
                    <ChildTest ref={childFunRef} refInput={refInput} inputVal={inputVal}></ChildTest>
                </TestContext.Provider>

                <hr />
                <p>子类组件：测试通过ref获取子组件的属性</p>
                <TestContext.Provider value={{ contextData, updateConetextData }}>
                    <ClassCom ref={childRef} age={22}></ClassCom>
                </TestContext.Provider>

                <button onClick={getChildRef}>获取子组件的ref</button>
                <br />
                <button disabled onClick={getFunChildRef}>获取函数子组件的ref</button>
            </div>
        </>
    )
}

export default TestView